<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { imgUploadService } from '@/api/uppic'
import SaveButton from './components/SaveButton.vue';

const loading = ref(false)
const imgUrl = ref()
const imgFile = ref({
    file: null
})
const detectedImageUrl = ref()
const onUploadFile = (uploadFile) => {
    imgUrl.value = URL.createObjectURL(uploadFile.raw)
    imgFile.value.file = uploadFile.raw
}
const onSubmitPic = async () => {
    if (!imgUrl.value) return ElMessage.error('请选择图片')
    loading.value = true
    const res = await imgUploadService(imgFile.value)
    detectedImageUrl.value = 'data:image/jpeg;base64,' + res.data.image_data
    loading.value = false
    ElMessage.success('检测成功')
}
</script>

<template>
    <div class="image-uploader">
        <el-card class="upload-section">
            <template #header>
                <b>上传图片</b>
            </template>
            <div class="content-container">
                <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false"
                    :on-change="onUploadFile">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <save-button @click="onSubmitPic" style="margin-top: 30px">上传</save-button>
            </div>
        </el-card>

        <el-card class="display-section">
            <template #header>
                <b>检测后的图片</b>
            </template>
            <el-skeleton :loading="loading" animated>
                <el-image v-if="detectedImageUrl" :src="detectedImageUrl" fit="contain"
                    style="width: 100%; height: 200px"></el-image>
                <img v-else src="@/assets/un-upload.svg" alt="未上传图片" class="unloaded-image"
                    style="width: 100%; height: 200px; object-fit: contain" />
            </el-skeleton>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.image-uploader {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80vh;
}

.upload-section,
.display-section {
    width: 420px;
    height: 360px;
    object-fit: contain;
}

.content-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .avatar-uploader {
        :deep() {
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
                object-fit: contain;
            }

            .el-upload {
                border: 1px dashed var(--el-border-color);
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: var(--el-transition-duration-fast);
            }

            .el-upload:hover {
                border-color: var(--el-color-primary);
            }

            .el-icon.avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                text-align: center;
            }
        }
    }
}
</style>
